<template>
  <div class="order">
    <h3>订单管理</h3>
    <div class="orderInner">
      <div class="select">
        <span>订单类型:</span>
        <el-select v-model="value1" placeholder="请选择" @change="changeValue">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <div class="inp">
          <span>搜索:</span>
          <el-input v-model="input" placeholder="请输入手机号/用户名/订单号"></el-input>
          <el-button type="primary" @click="search">查询</el-button>
        </div>
      </div>

      <div class="order-main">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="序号" type="index" width="200"></el-table-column>

          <el-table-column label="编号" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>

          <el-table-column label="用户名" width="230" >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="手机号" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>

          <el-table-column label="类型" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>

          <el-table-column label="支付金额" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>

          <el-table-column label="支付时间" width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.payTime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="292">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 5,
      input: "",
      value1: "",
      options: [
        {
          value: "有房出租",
          label: "有房出租"
        },
        {
          value: "二手房出租",
          label: "二手房出租"
        }
      ]
    };
  },
  created() {
    this.getAddress();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    //获取数据
    async getAddress() {
      let res = await this.$http.get("/api/getOrder", {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      });
      console.log(res);
      this.tableData = res.data.data;
    },
    //删除
    handleDelete(index, row) {
      this.$http
        .post("/api/orderDelete", {
          id: row.id
        })
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message);
            this.getOrder(this.pageIndex, this.pageSize);
          }
        });
    },
    //类型
    changeValue(value1) {
      console.log(value1);
      this.$http
        .post("/api/OrderSelect", {
          value: value1
        })
        .then(res => {
          if (res.data.code === 1) {
            this.data = res.data.data;
            this.$message.success(res.data.message);
          }
        });
    },
    // 搜索
    search() {
      this.$http
        .post("/api/searchInp", {
          value: this.input
        })
        .then(res => {
          this.data = res.data.data;
          this.$message.success(res.data.message);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  min-height: 500px;
}
.orderInner {
  width: 100%;
  height: 500px;
  background: white;
  margin: 10px 0;
  padding: 10px;
  position: relative;
  .select {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    span {
      display: inline-block;
      width: 100px;
    }
  }
}
.inp {
  width: 70%;
  display: flex;
  align-items: center;
  padding-left: 30px;
  .el-input {
    width: 500px;
  }
}
</style>